import React from 'react'
import PropTypes from 'prop-types'
import { Button, Cascader, Form, Icon, Modal, Upload, Select } from 'antd'

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  dispatch,
  cascaderProps,
  systemProcessListOption,
  processTypeListOption,
  item = {},
  onOk,
  onCancel,
  onSystemSelectChange,
  form: {
    getFieldDecorator,
    validateFields, setFieldsValue,
    getFieldsValue, resetFields,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      onOk(data)
    })
  }
  const handleCancel = () => {
    resetFields()
    onCancel()
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
    onCancel: handleCancel,
  }

  const onRemove = () => {
    dispatch({
      type: 'deploy/deleteUpload',
      payload: {
        file: null,
      },
    })
    setFieldsValue({ file: null })
  }
  const beforeUpload = (file) => {
    dispatch({
      type: 'deploy/beforeUpload',
      payload: {
        file,
      },
    })
    return false
  }
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem label="部署文件" hasFeedback {...formItemLayout}>
          {getFieldDecorator('file', {
            initialValue: null,
            rules: [
              {
                required: true,
                message: '部署文件不能为空!',
              },
            ],
          })(
            <div>
              <Upload onRemove={onRemove} accept=".zip" beforeUpload={beforeUpload}>
                <Button>
                  <Icon type="upload" /> 选择文件
                </Button>
              </Upload>
            </div>,
          )}
        </FormItem>
        <FormItem label="系统租户" hasFeedback {...formItemLayout}>
          {getFieldDecorator('systemCode', {
            initialValue: null,
            rules: [
              {
                required: true,
                message: '系统租户不能为空!',
              },
            ],
          })(<Select placeholder={'选择系统租户'} onChange={onSystemSelectChange}>{systemProcessListOption}</Select>
          )}
        </FormItem>
        <FormItem />
        <FormItem label="业务类型" hasFeedback {...formItemLayout}>
          {getFieldDecorator('processTypeId', {
            initialValue: null,
            rules: [
              {
                required: true,
                message: '业务类型不能为空!',
              },
            ],
          })(<Select placeholder={'选择业务类型'}
            onChange={cascaderProps.onChange}
          >
            {processTypeListOption}
          </Select>)}
        </FormItem>
      </Form>
    </Modal>
  )
}
modal.propTypes = {
  dispatch: PropTypes.func,
  cascaderProps: PropTypes.object,
  systemProcessListOption: PropTypes.array,
  processTypeListOption: PropTypes.array,
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
  onCancel: PropTypes.func,
  onSystemSelectChange: PropTypes.func,
}

export default Form.create()(modal)
